/**
 * 系统管理 单位管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>单位管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row
      :gutter="20"
      style="height: 100%; min-height: 400px; margin-top: 20px"
    >
      <!--侧边部门数据-->
      <el-col
        :xs="9"
        :sm="6"
        :md="5"
        :lg="4"
        :xl="4"
        style="height: calc(100vh - 150px)"
      >
        <div style="height: 100%; overflow: scroll; margin-top: 20px">
          <el-tree
            :data="deptDatas"
            :props="defaultProps"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>

      <!--用户数据-->
      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <!--工具栏-->
        <div class="head-container">
          <div>
            <!-- 搜索 -->
            <el-input
              v-model="queryData.blurry"
              clearable
              size="small"
              placeholder="输入部门名称"
              style="width: 200px"
              class="filter-item"
              @keyup.enter.native="toQuery"
            />
            <el-date-picker
              v-model="queryData.time"
              type="datetimerange"
              size="small"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
            <el-select
              v-model="queryData.enabled"
              clearable
              size="small"
              placeholder="状态"
              class="filter-item"
              style="width: 90px"
            >
              <el-option
                v-for="item in enabledTypeOptions"
                :key="item.key"
                :label="item.name"
                :value="item.key"
              />
            </el-select>
          </div>
          <el-row style="margin-top: 20px">
            <el-button
              size="small"
              icon="el-icon-plus"
              type="primary"
              @click="add"
              >新增</el-button
            >
            <el-button
              size="small"
              icon="el-icon-delete"
              type="primary"
              >删除</el-button
            >
            <el-button
              size="small"
              icon="el-icon-download"
              type="primary"
              @click="doExport"
              >导出</el-button
            >
          </el-row>
        </div>
        <!--表单渲染-->
        <el-dialog
          append-to-body
          :close-on-click-modal="false"
          :before-close="close"
          :visible.sync="isAdd"
          :title="title"
          width="720px"
        >
          <el-form
            ref="form"
            :inline="true"
            :rules="rules"
            :model="form"
            size="small"
            label-width="86px"
          >
            <el-form-item label="单位名称" prop="deptName">
              <treeselect
                v-model="form.deptName"
                :options="deptList"
                style="width: 530px"
                placeholder="选择所属单位"
              />
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="序号" prop="serialNumber">
                  <el-input v-model="form.serialNumber" placeholder="请输入序号"/>
                </el-form-item>
              </el-col>
             
              <el-col :span="12">
                <el-form-item label="单位地址" prop="address">
                  <el-input v-model.number="form.address" placeholder="请输入单位地址"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人" prop="contacts">
                  <el-input v-model.number="form.contacts" placeholder="请输入联系人"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="phone">
                  <el-input v-model.number="form.phone" placeholder="请输入联系方式"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="统一社会信用代码" prop="SUCCode">
                  <el-input v-model.number="form.SUCCode" placeholder="请输入统一社会信用代码"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否是顶级部门" prop="isTop">
                  <el-select
                    v-model="form.isTop"
                    clearable
                    size="small"
                    placeholder="是否"
                    style="width: 192px"
                  >
                    <el-option
                      v-for="item in topList"
                      :key="item.key"
                      :label="item.name"
                      :value="item.key"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" prop="enabled">
                  <el-select
                    v-model="form.enabled"
                    clearable
                    size="small"
                    placeholder="请选择状态"
                    style="width: 192px"
                  >
                    <el-option
                      v-for="item in enabledTypeOptions"
                      :key="item.key"
                      :label="item.name"
                      :value="item.key"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位性质" prop="nature">
                  <el-input v-model.number="form.nature" placeholder="请输入单位性质"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="close">取消</el-button>
            <el-button type="primary" @click="submit">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table
          ref="table"
          v-loading="loading"
          :data="tableList"
          style="width: 100%"
          height="500px"
          @selection-change="selectionChangeHandler"
        >
          <el-table-column
            :selectable="checkboxT"
            type="selection"
            width="55"
          />
          <el-table-column prop="deptName" label="单位名称" />
          <el-table-column prop="serialNumber" label="序号" />
          <el-table-column prop="SUCCode" label="社会统一信用代码" />
          <el-table-column prop="address" width="100" label="单位地址" />
          <el-table-column prop="contacts	" label="联系人">
            <template slot-scope="scope">
              <span>{{ scope.row.dept.deptName }}</span>
            </template>
          </el-table-column>
          <el-table-column width="135" prop="phone" label="联系方式" />
          <el-table-column width="155" prop="isTop" label="是否是顶级部门" />
          <el-table-column width="55" prop="enabled" label="状态" />
          <el-table-column width="135" prop="nature" label="单位性质" />
          <el-table-column
            label="操作"
            width="115"
            align="center"
            fixed="right"
          >
            <!-- <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
                :disabled-dle="scope.row.id === user.id"
              />
            </template> -->
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          background
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { doExport } from "@/utils/util.js";
import Treeselect from "@riophae/vue-treeselect";
export default {
  name: "user",
  components: { Treeselect },
  data() {
    return {
      currentPage: 1,
      loading: false,
      title: "",
      user: {
        id: null,
      },
      form: {
      },
      // rules 表单验证
      rules: {
        deptName: [
          { required: true, message: "请选择单位名称", trigger: "change" },
        ],
        serialNumber: [{ required: true, message: "请输入序号", trigger: "blur" }],
        SUCCode: [{ required: true, message: "请输入社会统一信用代码", trigger: "blur" }],
        address: [{ required: true, message: "请输入单位地址", trigger: "blur" }],
        contacts: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
        nature: [{ required: true, message: "请输入单位性质", trigger: "blur" }],
        isTop: [
          { required: true, message: "请选择是否为顶级部门", trigger: "change" },
        ],
        enabled: [
          { required: true, message: "请选择状态", trigger: "change" },
        ],
      },
      // 添加用户
      isAdd: false,
      // 列表数据
      tableList: [],
      // 搜索项数据
      queryData: {
        enabled: [],
        deptName: "",
        createTime: null,
        blurry: null,
        deptId: null,
      },
      topList: [
        { name: "是", key: "1" },
        { name: "否", key: "2" },
      ],
      enabledTypeOptions: [
        { name: "状态1", key: "1" },
        { name: "状态2", key: "2" },
      ],
      // 部门树
      deptDatas: [
        {
          deptName: "沧州市人民政府",
          children: [
            { deptName: "沧州市大数据中心" },
            { deptName: "沧州市外事服务中心" },
            { deptName: "沧州市政府办公室综合事务保障中心" },
            { deptName: "沧州市机关事务保障中心" },
          ],
        },
      ],
      defaultProps: { children: "children", label: "deptName" },
      deptList: [
        {
          children: [
            { id: 201101, label: "沧州市大数据中心" },
            { id: 201102, label: "沧州市外事服务中心" },
            { id: 201103, label: "沧州市政府办公室综合事务保障中心" },
            { id: 201104, label: "沧州市机关事务保障中心" },
          ],
          id: 2011,
          label: "沧州市人民政府",
        },
      ],
      // 时间快捷按钮
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    add() {
      this.isAdd = true;
      this.title = "新增单位";
    },
    // 切换部门
    handleNodeClick(data) {
      if (data.pid === 0) {
        this.queryData.deptId = null;
      } else {
        this.queryData.deptId = data.id;
      }
      this.toQuery();
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.close();
        }
      });
    },
    checkboxT(row, rowIndex) {
      return row.id !== this.user.id;
    },
    toQuery() {},
    close() {
      this.isAdd = false;
      this.title = "";
      this.reset();
    },
    reset() {
      this.form = {
        deptName: null,
        serialNumber: null,
        SUCCode: null,
        address:null,
        contacts:null,
        phone: null,
        isTop:null,
        enabled:null,
        nature:null
      };
    },
    // 获取左侧部门数据
    getDeptDatas(node, resolve) {
      const sort = "id,desc";
      const params = { sort: sort };
      if (typeof node !== "object") {
        if (node) {
          params["name"] = node;
        }
      } else if (node.level !== 0) {
        params["pid"] = node.data.id;
      }
      setTimeout(() => {
        // getDepts(params).then((res) => {
        //   if (resolve) {
        //     resolve(res.content);
        //   } else {
        //     this.deptDatas = res.content;
        //   }
        // });
      }, 100);
    },
    getDepts() {
      // getDepts({ enabled: true }).then((res) => {
      //   this.depts = res.content.map(function (obj) {
      //     if (obj.hasChildren) {
      //       obj.children = null;
      //     }
      //     if (!obj.hasChildren) {
      //       delete obj.children;
      //     }
      //     return obj;
      //   });
      // });
    },
    // 导出
    doExport() {
      doExport();
    },
    // 获取弹窗内部门数据
    loadDepts({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        // getDepts({ enabled: true, pid: parentNode.id }).then((res) => {
        //   parentNode.children = res.content.map(function (obj) {
        //     if (obj.hasChildren) {
        //       obj.children = null;
        //     }
        //     if (!obj.hasChildren) {
        //       delete obj.children;
        //     }
        //     return obj;
        //   });
        //   setTimeout(() => {
        //     callback();
        //   }, 200);
        // });
      }
    },
    selectionChangeHandler() {},
  },
};
</script>

<style scoped>
</style>

 